<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Gauge</title>
    <style>
        body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
    </style>
    <!-- vue2 -->
    <script src="./script/vue_2.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
    <!-- element 引入组件库 -->
    <script src="./element-ui/lib/index.js"></script>
    <!-- jquery 3.6 -->
    <script src="./script/jquery-3.6.0.min.js"></script>
    <script src="./script/gauge.min.js"></script>
</head>

<body>
    <div class="chart">
        <canvas id="gauge"></canvas>
      </div>
    <script>
        let opts = {
            angle: 0, // The span of the gauge arc
            lineWidth: 0.44, // The line thickness
            radiusScale: 0.83, // Relative radius
            pointer: {
                length: 0.6, // // Relative to gauge radius
                strokeWidth: 0.035, // The thickness
                color: '#000000' // Fill color
            },
            limitMax: false, // If false, max value increases automatically if value > maxValue
            limitMin: false, // If true, the min value of the gauge will be fixed
            colorStart: '#FF0000', // Colors
            colorStop: '#00FF00', // just experiment with them
            strokeColor: '#0011E0', // to see which ones work best for you
            generateGradient: true,
            highDpiSupport: true // High resolution support
        }

        let target = document.getElementById('gauge') // your canvas element

        let gaugeChart = new Gauge(target).setOptions(opts) // create sexy gauge!
        gaugeChart.maxValue = 3000 // set max gauge value
        gaugeChart.setMinValue(0) // Prefer setter over gauge.minValue = 0
        gaugeChart.animationSpeed = 32 // set animation speed (32 is default value)
        gaugeChart.set(1250) // set actual value
    </script>
</body>